<template>
      <el-row class="warp">
        <el-col class="publicNav" :span="3" style="height:100%;">
            <router-link class="newnava" :to="{path:'/layout/alarm'}">告警参数设置</router-link>
            <router-link :to="{path:'/layout/contacts'}">联系人设置</router-link>
            <router-link :to="{path:'/layout/alarmtest'}">用户测试</router-link>
        </el-col>
        <el-col :span="21" style="height:100%;">
          <div class="main-contents-box">
            <div class="main-contents-main">
              <div class="alarmwarp">
                  <div class="alarm-content">
                      <el-col :span="18" :xs="18" :sm="18" style="height:100%;">
                        <ul class="alarm-content-ul">
                            <li class="alarm-content-li">
                                <div class="alarm-box" style="">
                                  <span style="font-size: 14px;color:#606266">严重告警最大告警项</span>
                                  <el-input class="maxnumber"  size="mini" v-model.number="maxalarmnum" placeholder="1-99" :maxlength="2" :minlenght="1"  max='99' min='1' ></el-input>
                                </div>
                            </li>
                            <li class="alarm-content-li">
                                <div class="alarm-box">
                                  <span style="font-size: 14px;color:#606266">数据库存储周期</span>
                                  <el-select v-model="memcycle" placeholder="请选择" size="mini" style="width:70px;" align="right">
                                      <el-option
                                        v-for="item in options1"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                      </el-option>
                                  </el-select>
                                </div>
                            </li>
                            <li class="alarm-content-li">
                                <div class="alarm-box">
                                    <span style="font-size: 14px;color:#606266">模块选级</span>
                                    <el-select v-model="telmodule" placeholder="请选择" size="mini" style="width:98px;margin-left: 10px;" align="right">
                                        <el-option
                                          v-for="item in options2"
                                          :key="item.value"
                                          :label="item.label"
                                          :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                            </li>
                        </ul>
                      </el-col>
                      <el-col :span="3" :xs="5" :sm="4" style="height:100%;text-align: center;">
                        <el-checkbox v-model="popupenable">开启告警弹窗</el-checkbox>
                      </el-col>
                      <el-col :span="2" :xs="3" :sm="2" style="height:100%;text-align: center;">
                        <el-button size="mini" type="primary" @click="alamSave">保存</el-button>
                      </el-col>
                  </div>
                  <template>
                    <el-tabs type="border-card" @tab-click="handleClick" >
                      <el-tab-pane v-for="items in tabsName" :label="items">
                        <div class="alarmcontent">
                            <template>
                              <el-table
                                v-show="islimit"
                                :data="tableData"
                                border
                                size="mini"
                                header-align="center"
                                style="width: 80%;margin: auto;">
                                <el-table-column
                                  prop="date"
                                  label="告警调节"
                                  align="center"
                                  width='150'
                                 >
                                </el-table-column>
                                <el-table-column
                                  label="告警参数"
                                  align="center"
                                 >
                                <template slot-scope="scope">
                                  <el-input :maxlength='5' :minlenght='1' v-model.number="scope.row.parameter" size="mini" width="100"  placeholder="请输入参数" ></el-input>
                                </template>
                                </el-table-column>
                                <el-table-column
                                  align="center"
                                  width="200"
                                  label="告警方式">
                                    <template slot-scope="scope">
                                      <el-checkbox-group :key="scope.row.metadataid" v-model="scope.row.mode" @change="vivew(scope.$index, scope.row)" >
                                        <el-checkbox label="1"> 短信</el-checkbox>
                                        <el-checkbox label="2"> 电话</el-checkbox>
                                      </el-checkbox-group>
                                    </template>
                                </el-table-column>
                              </el-table>
                              <el-table
                                v-show="islimit2"
                                :data="tableData1"
                                border
                                size="mini"
                                :show-header="islimit1"
                                header-align="center"
                                style="width: 80%;margin: auto;">
                                <el-table-column
                                  prop="name"
                                  label="告警调节"
                                  align="center"
                                  width='150'
                                 >
                                </el-table-column>
                                <el-table-column
                                  prop=""
                                  label="告警参数"
                                  align="center"
                                 ></el-table-column>
                                <el-table-column
                                  width="200"
                                  align="center"
                                  label="告警方式">
                                    <template slot-scope="scope">
                                      <el-checkbox-group  v-model="scope.row.mode" @change="vivew1(scope.$index, scope.row)">
                                        <el-checkbox label="1"> 短信</el-checkbox>
                                        <el-checkbox label="2"> 电话</el-checkbox>
                                      </el-checkbox-group>
                                    </template>
                                </el-table-column>
                              </el-table>
                            </template>
                        </div>
                      </el-tab-pane>
                    </el-tabs>
                    <div class="humiturebtn">
                          <el-button type="primary" size="mini" @click="safebtn">保存</el-button>
                    </div>
                  </template>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
</template>
<script>
import {get_chart_sensorlist,get_attr1} from '../js/public.js';
/*-------------------------说明注释文档------------------------*/
//页面加载请求常规选项getstart_header();和当前的显示的页面数据getstart_tabs();
//常规选项点击保存的时候alamSave();当前页面的保存的时候modeSave();
//data:sensorid(设备id对应)
export default {
  name: 'alarm',
  data () {
    return {
          tableData: [],
          options: [1,2,3,4],
          options1: [30,60,90,120],
          maxalarmnum:1,
          telmodule:1,
          memcycle:30,
          msg:[],
          popupenable:false,
          options2: [{
              value:2,
              label:'固话优先'
            },{
              value:1,
              label:'GSM优先'
            }
          ],
          sensorid:1,
          tabsName:[],
          islimit:false,
          islimit1:false,
          islimit2:false,
          newid:[],
          metadataid:[],
          metadataidFlase:[],
          alarmstatus:[],
          tableData1:[],
          sensoridarr:[],
    }
  },
  methods: {
      get_pwd(){
        let  pwd; 
        $.ajax({
            url:'../cfg/password.json',
            type:'GET',
            cache:false,
            async: false,
            dataType:'text',
            success:function(result){
                let data = eval("("+result+")");
                pwd = data.password;
            },
            error:function(realdata){                           
            }
        })
        return pwd;
    },
    check_pwd(){
        let username = window.sessionStorage.getItem('username');
        let password = window.sessionStorage.getItem('password');
        let pwd = this.get_pwd();
        if(username == "admin"){
            if(password != pwd){
                this.$message({
                    message: '密码做了更改,请重新登录!',
                    type: 'info',
                    center:true,
                    showClose: true
                });
                this.loginout();
            }
        } 
    },
    loginout(){
        window.sessionStorage.removeItem("username");
        window.sessionStorage.removeItem("password");
        this.set_log("用户退出");
        this.$router.push("/login");
    },
    set_log(str){//用户操作日志
        let  msg= {"cmd":"CGI_LOG_SET_OPT","content":str};
        $.ajax({
            url:"cgi-bin/main.cgi",
            contentType: "application/json;charset=utf-8",
            type:"post",
            data:JSON.stringify(msg),
            success:function(msg){           
            }
        })
    },
      handleClick(tab, event) {
        let tabs =parseInt(tab.index);
        let that=this;
        this.$data.sensorid=this.$data.sensoridarr[tabs]
        this.get_tab_info()
      },
      alamSave(){
      	let _this = this;
        this.$confirm('此操作将修改系统配置, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let that=this;
          let reg = /^[1-9]$|^[1-9][0-9]$/;
          if(!reg.test(this.$data.maxalarmnum)){
            this.$message({
                type: 'error',
                message: '只能填写为1-99之间的数字！'
              });
            this.$data.maxalarmnum=1;
            return false;
          }
          
          let msg={"cmd":"CGI_ALARM_SET_NORMAL","alarm":{"telmodule":this.$data.telmodule,"memcycle":this.$data.memcycle,"maxalarmnum":parseInt(this.$data.maxalarmnum),"popupenable":this.$data.popupenable}}
          this.$ajax.post("./cgi-bin/main.cgi",msg).then(function(res){
              if(res.data.response==true){
                that.$message({
                  type: 'success',
                  message: '保存成功'
                })
              _this.$store.commit('setalarmstatus',_this.$data.popupenable);
              }else{
                that.$message({
                  type: 'error',
                  message: '保存失败',
                })
              }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作'
          });
        });
      },
      getstart_header(){
          let that=this;
          this.$ajax.post("./cgi-bin/main.cgi",{"cmd":"CGI_ALARM_GET_NORMAL"}).then(function(res){
              that.$data.maxalarmnum=res.data.maxalarmnum;
              that.$data.memcycle=res.data.memcycle;
              that.$data.telmodule=res.data.telmodule;
              that.$data.popupenable=res.data.popupenable;
          });
      },
      safebtn(){
        this.$confirm('此操作将修改系统配置, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            let msg=new Array();
            let msge=new Array();
            let that=this;
            //对录输入上下限合法性,初始值为0
            let compare_data = 0;
             //记录告警项           
             let merge_arr = new Array();
             let alarm_new=new Array();//最终的告警管理
                  $.each(this.$data.metadataid,function(i,val){//65536,65537,65538
                      let alarm_arr=new Array();
                      let arrb=new Array();
                      $.each(that.$data.tableData,function(n,value){//65537,65537,65538,65538
                          let msges;
                          if(value.metadataid==val){
                              arrb["metadataid"] =  val;
                              arrb["islimit"] =  true;
                              switch(value.mode.length){
                                  case 0: msges=0;break;
                                  case 1: msges=parseInt(value.mode[0]);break;
                                  default:msges=3;break;
                              };
                              arrb[value.name] = {"data":parseFloat(value.parameter.toFixed(2)),"alarmtype":parseInt(msges)};
                          }
                      });
                      if(arrb["metadataid"]){//非告警项会添加到整合的数据中
                             //merge_arr.push(arrb);
                             //判断输入上下限的合法性
                             if(arrb.upperlimit["data"] <= arrb.lowerlimit['data']){
                                compare_data = 1;
                             }

                              let str = {"metadataid":arrb.metadataid,"islimit":true,"upperlimit":arrb.upperlimit,"lowerlimit":arrb.lowerlimit};
                             merge_arr.push(str);
                      }
                  })

                  if(compare_data == 1){
                      that.$message({
                          type: 'error',
                          message: '数据填写错误,请重新填写!'
                      });
                      return false;
                  }

                  $.each(that.$data.tableData1,function(n,value){
                      let alarm_msg1 ;
                      let alarm_news=new Array();
                      alarm_news["metadataid"]=value.metadataid;
                      alarm_news["islimit"]=false;
                      switch(value.mode.length){
                              case 0: alarm_msg1=0;break;
                              case 1: alarm_msg1=parseInt(value.mode[0]);break;
                              default:alarm_msg1=3;break;
                        };
                        alarm_news["alarmtype"] = alarm_msg1;
                        //merge_arr.push(alarm_news);
                        let str = {"metadataid":value.metadataid,"islimit":false,"alarmtype" :parseInt(alarm_msg1)};
                        merge_arr.push(str);
                  })
                msg={"cmd":"CGI_ALARM_SET_PARAM","sensorid":this.$data.sensorid,"content":merge_arr};
                  //console.log(msg);
                  this.$ajax.post("./cgi-bin/main.cgi",msg).then(function(res){
                    if( res.data.response==true){
                        that.$message({
                          type: 'success',
                          message: '保存成功'
                        });
                    }else{
                        that.$message({
                            type: 'error',
                            message: '保存失败'
                        });
                    }
                })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作',
            position:'bottom-right'
          });
        });
      },
      gettabs(){
        let that=this;
        this.$ajax.post("./cgi-bin/main.cgi",{"cmd":"CGI_ALARM_GET_SENSORIDLIST"}).then(function(res){
            let tabs=new Array();
            tabs=res.data;
            that.$data.sensoridarr=res.data;
            
            $.each(tabs,function(i,value){
                that.$data.tabsName.push(get_chart_sensorlist(value))
            })
            that.$data.sensorid=tabs[0];
            that.get_tab_info(tabs[0]);
        })
      },
      vivew(row,index){
        this.$set(this.$data.tableData,row,index);
        //console.log(this.$data.tableData)
      },
      vivew1(row,index){
        this.$set(this.$data.tableData1,row,index);
      },
     get_tab_info(){
        let that=this;
        this.$data.metadataid=[];
        that.$data.tableData1=[];

        this.$ajax.post("./cgi-bin/main.cgi",{"cmd":"CGI_ALARM_GET_PARAM","sensorid":this.$data.sensorid}).then(function(res){
          let arr_info = new Array();
          let arrmode=new Array();
          let  arr_name_info=new Array();
          $.each(res.data,function(n,value){
            if(value.islimit === false){//故障栏显示
                that.$data.islimit2=true;
                let arr_name=new Array();
                  arr_name["metadataid"]=value.metadataid;
                  arr_name['name']=get_attr1(value.metadataid);
                  let mode_name=new Array();
                  if(value.alarmtype & 1){
                    //that.$data.msg.push("1");
                    mode_name.push("1");
                  };
                  if(value.alarmtype & 2){
                    //that.$data.msg.push("2");
                    mode_name.push("2");
                  };
                   arr_name['mode']=mode_name;
                   arr_name_info.push(arr_name);
            }

            if(value.islimit === true){//组装tabdata 数据，给页面显示
                that.$data.islimit=true;
                that.$data.metadataid.push(value.metadataid);
                //先获取数组的元素属性
                //let data_attr = that.get_attr(value.metadataid);
                let ab=new Array();
                ab=["upperlimit","lowerlimit"];
                $.each(ab,function(n,val){
                  //val : upperlimit   lowlomit
                    let arr = new Array();
                    if(value[val]){
                        if(val=="upperlimit"){
                          arr["date"] = get_attr1(value.metadataid)+"上限";
                        }else if(val=="lowerlimit"){
                          arr["date"] = get_attr1(value.metadataid)+"下限";
                        };
                        arr["parameter"] = value[val].data;
                        arr["metadataid"]=value.metadataid;
                        arr["name"]=val;
                        arr["islimit"]=value.islimit;
                        let mode_arr = new Array();
                        if(value[val].alarmtype & 1){
                            mode_arr.push("1");
                        };
                        if(value[val].alarmtype & 2){
                            mode_arr.push("2");
                        };
                        arr["mode"] = mode_arr;
                    }
                    arr_info.push(arr);
                });
            }
          });

          if(arr_info.length!=0  && arr_name_info.length!=0){
              that.$data.tableData = arr_info;
              that.$data.islimit = true;
              that.$data.tableData1 = arr_name_info;
              that.$data.islimit1=false;
              that.$data.islimit2 = true;
          };

          if(arr_info.length==0  && arr_name_info.length!=0){
              that.$data.islimit=false;
              that.$data.tableData1 = arr_name_info;
              that.$data.islimit1=true;
          };

          if(arr_info.length!=0  && arr_name_info.length==0){
              that.$data.islimit=true;
              that.$data.tableData = arr_info;
              that.$data.islimit1=false;
              that.$data.islimit2=false;
          };

          if(arr_info.length==0  && arr_name_info.length==0){
              that.$data.islimit=false;
              that.$data.islimit1=false;
              that.$data.islimit2=false;
          };
             //that.$data.tableData = arr_info;
             //that.$data.tableData1 = arr_name_info;
          })
      },
      get_attr(a){
         let arr = new Array();
         arr ={
              "65537":["upperlimit","lowerlimit"],
              "65538":["upperlimit","lowerlimit"],
              }
         return arr[a];
      }
    },
    mounted(){
        this.check_pwd();
        this.getstart_header();
        this.gettabs();
    },
}
</script>
<style>
.alarmwarp{
  width: 85%;
  margin: auto;
  margin-top: 5%;
  position: relative;
  min-width: 734px;
}
.alarmwarp .el-radio+.el-radio{
  margin: 0px;
}
.humiturebtn{
  width: 80%;
  margin: auto;
  height: 30px;
  padding-top: 20px;
  overflow: hidden;
  position: absolute;
  bottom: 20px;
  right: 10%;
}
.humiturebtn .el-button{
  float: right;
  width: 80px;
}
.alarmcontent{
  min-height: 250px;
  width: 100%;
  max-height:420px;
  overflow-y:auto
}
.alarmwarp .maxnumber{
  width:50px;
  float: right;
  text-align: center;
}
.alarmwarp .maxnumber .el-input__inner{
  padding: 0px;
  text-align: center;
}
.alarmwarp .el-tabs--border-card{
  padding-bottom: 50px;
}
.fault-box{
  width:80%;
  height:40px;
  margin:auto;
  border:1px solid #ebeef5;
  border-top: 0px;
  box-sizing:border-box;
  line-height: 40px;
}
.fault-box-title{
  width:150px;
  text-align: center;
  font-size: 14px;
  color:#606266;
  float:left;
}
.fault-box-content{
  float: right;
  width:200px;
  text-align: center;
  height: 100%;
}
.alarm-content{
  width:100%;
  height:50px;
  line-height:50px;
  border:1px solid #dcdfe6;
  border-bottom:0px;
  box-sizing:border-box;
  border-bottom: 0px;
  overflow: hidden;
  min-width: 734px;
}
.alarm-box{
  width:auto;
  text-align: center;
  margin:auto;
}
.alarm-content-ul{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.alarm-content-li{
  float: right;
  width: 33.3%;
  text-align: center;
}
</style>
